<template>
  <div class="category">
    <!-- 按钮开始 -->
    <el-button style="margin-bottom:.5em;" type="primary" size="small" plain @click="showHandler()">添加</el-button>
    <!-- 按钮结束 -->
    <!-- 表格开始 -->
    <el-table :data="categorys" style="width: 100%;font-size: 12px;">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column prop="id" label="编号" align="center" width="120"></el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        align="center"
          width="120">
      </el-table-column>
      <el-table-column
        label="图标" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <img width="100%" :src="scope.row.icon" alt="">
            <div slot="reference" class="name-wrapper">
              <img width="30px" :src="scope.row.icon" alt="">
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="num"
        label="排序号"
        align="center"
        width="300">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="100">
        <template slot-scope="scope">
          <el-button @click="editHandler(scope.row)" type="text" size="small">编辑</el-button>
          <el-button style="color:red;" @click="deleteHandler(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->


    <div style="float:right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15,20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
       <!-- Form开始-->
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="name">
          <el-upload
            class="upload-demo"
            drag
            action="http://81.69.24.232/pet/jz_upload.php"
            :on-success="successHandler">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- Form结束-->
      <div slot="footer" size="small" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
  data(){
    return {
      list:{
          page:1,
          pageSize:5
        },
      dialogFormVisible: false,
      ruleForm:{},
      title: '添加栏目信息',
      currentPage: 1
    }
  },
  computed:{
    ...mapState('category',['categorys','total'])
  },
  methods:{
    ...mapActions('category',['findAllCategory','saveCategory','deleteCategory']),
    changeHandler(page){
      this.list.page=page;
      this.findAllCategory(this.list)
    },
    handleSizeChange(val) {
      this.list.pageSize=val;
      this.findAllCategory(this.list)
    },
    handleCurrentChange(val) {
      this.list.page=val;
      this.findAllCategory(this.list)
    },
    //去添加栏目信息
    showHandler(){
      this.dialogFormVisible=true;
    },
    //提交保存
    submitHandler(){
      this.saveCategory(this.ruleForm).then(res=>{
        if(res.status==200){
          this.dialogFormVisible=false;
          this.findAllCategory(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    //编辑栏目信息
    editHandler(data){
      this.title='编辑栏目信息'
      this.ruleForm=data;
      this.dialogFormVisible=true;
    },
    //删除栏目信息
    deleteHandler(id){
      let params={
        id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      this.deleteCategory(params).then(res=>{
        if(res.status==200){
          this.findAllCategory(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
      })
    },
    //文件上传成功时
    successHandler(file){
      //文件上传成功，将拿到的地址保存到icon参数中
      this.ruleForm.icon=file
    }
  },
  created(){
    this.findAllCategory(this.list)
  }
}
</script>
<style>

</style>